//jQuery的加载事件，到页面DOM加载完毕后执行
// $(document).ready(function(){
// })
//下面是简写的jQuery的加载事件
$(function () {
  let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; //定义序号
  $(".add").click(function () {
    let li = $('<li class="flex"/>').append("<span>").append("<input/>");
    let del = $('<button class="del"/>').text("-");
    let s = $('<button class="s"/>').text("↑");
    let x = $('<button class="x"/>').text("↓");
    li.append(del);
    li.append(s);
    li.append(x);
    $("ul").append(li);
    sort(); //更新序号
  });

  //删除按钮点击事件
  $("ul").on("click", ".del", function () {
    $(this).parents("li").remove();
    sort(); //执行更新序号
  });

  //上按钮点击事件
  $(".s").click(function () {
    let li1 = $(this).parents('li')
    let li2 = li1.prev()
    li1.after(li2)
    sort(); //执行更新序号
  });

  //下按钮点击事件
  $(".x").click(function () {
    let li1 = $(this).parents('li')
    let li2 = li1.next()
    li1.before(li2)
    sort(); //执行更新序号
  });

  //更新序号的方法
  function sort() {
    $("ul span").each(function (index, item) {
      $(item).text(str[index] + ".");
    });
    //第一个上禁用
    $(".s").prop("disabled", false).first().prop("disabled", true);
    //最后一个下禁用
    $(".x").prop("disabled", false).last().prop("disabled", true);
  }
  sort(); //执行更新序号
});
